<template>
  <div>
    <!--      步骤条-->
    <setep-bar :progress="progress"></setep-bar>
    <!--      表单数据 第一步-->
    <setp-one
      :formObj.sync="formData"
      :progress="progress"
      v-show="progress.active === 0"
      :categoryTree="categoryTree"
      ref="setpOne"
    ></setp-one>
    <!--      编辑框 第二步-->
    <quill-editor v-show="progress.active === 1" v-model="formData.description">
    </quill-editor>
    <!--      修改图片 第三步-->
    <setp-three
      :progress="progress"
      :saveData="saveData"
      v-show="progress.active === 2"
      @updateImage="updateImage"
    ></setp-three>
    <!--    成功的结果-->
    <result-com
      :progress="progress"
      v-show="progress.active === 3"
      @setProgressActive="setProgressActive"
      @setProgressIsActive="setProgressIsActive"
      @clearEditedContent="clearEditedContent"
      @clearSaveData="clearSaveData"
      @return-active="$emit('return-active', $event)"
      :saveData="saveData"
    ></result-com>
    <!--      操作按钮-->
    <handler-com
      @setProgressActive="setProgressActive"
      @setProgressIsActive="setProgressIsActive"
      @clearEditedContent="clearEditedContent"
      :progress="progress"
      :formData="formData"
      :saveData.sync="saveData"
    ></handler-com>
  </div>
</template>

<script>
import SetepBar from "@/components/SetpCom/SetepBar.vue";
import SetpOne from "@/components/SetpCom/SetpOne.vue";
import SetpThree from "@/components/SetpCom/SetpThree.vue";
import HandlerCom from "@/components/SetpCom/HandlerCom.vue";
import ResultCom from "@/components/SetpCom/ResultCom.vue";

export default {
  // 分类树型结构
  props: ["categoryTree", "updateProduct"],
  name: "SetpCom",
  components: { ResultCom, HandlerCom, SetpThree, SetpOne, SetepBar },
  data() {
    return {
      // 进度相关
      progress: {
        isSetActive: false, // 是否可以修改进度条
        active: 0, // 步骤  0  1  2
      },
      // 表单数据
      formData: {
        is_published: false, // 是否上架
        name: "", //  商品的名称
        stock: 0, // 库存
        price: 0, // 商品的原价格
        sale_price: 0, //  商品的销售价格
        short_desc: "", //  商品的简述
        display_image: "", //  用于做商品展示图的图片 url
        category: "", // 商品所属的类别的 id
        description: "", //  商品详情描述的富文本字符串
        subtitle: "", //副标题
      },
      // 保存的数据
      saveData: this.updateProduct || null, // 默认为null 如果传了就表示更新
    };
  },
  methods: {
    // 修改步数
    setProgressActive(value) {
      if (!this.progress.isSetActive && !this.saveData)
        return this.$message.warning("请先完成第一步");
      this.progress.active = value;
    },
    // 修改是否可进入下一步
    setProgressIsActive(value) {
      this.progress.isSetActive = value;
    },
    // 清空编辑内容
    clearEditedContent() {
      this.formData.description = "";
    },
    // 修改图片地址
    updateImage(value) {
      this.formData.display_image = value;
    },
    // 清空保存的数据
    clearSaveData() {
      this.saveData = null;
    },
  },
  created() {
    if (this.saveData) {
      this.progress.isSetActive = true;
    }
    this.formData = { ...this.formData, ...this.saveData };
  },
};
</script>

<style lang="scss">
.el-row {
  margin-top: 20px;
}
.el-form-item {
  margin: 0;
  ::v-deep .el-form-item__content {
    line-height: initial;
  }
}
.quill-editor {
  height: 300px;
  margin-top: 20px;
  margin-bottom: 90px;
}
</style>
